<template>
  <div class="one-map">
    <div class="map-container" id="container"></div>
  </div>
</template>

<script>
import { deviceDeviceMap, earlyWarningPage, mentalpatientDeviceDetails } from '../../../api/api'
import { getComponentDom } from '../../../utils/util'
import InfoWindow from './components/infoWindow'

export default {
  data() {
    return {
      map: null,
      config: {
        header: ['姓名', '报警类型', '处置状态', '报警时间'],
        data: [],
        columnWidth: [80, 130, 100],
      },
      time: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.initMap()
    })
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    initMap() {
      let { policeAgencyLat, policeAgencyLng } = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value
      console.log('initmap')
      this.map = new TMap.Map(document.getElementById('container'), {
        center: new TMap.LatLng(policeAgencyLat, policeAgencyLng), // 西安
        zoom: 8,
        minZoom: 6,
        maxZoom: 20,
        // viewMode: '2D',
        // pitch: 45,
        doubleClickZoom: false,
        showControl: false,
        mapStyleId: 'style1',
        baseMap: [
          { type: 'vector' }, //设置矢量底图
          {
            type: 'building3d',
            features: ['base'], //路况图类型，目前支持路况线网
            opacity: 0.3, //路况线网图的透明度
          },
        ],
      })
      let imgSrc = require('@/assets/imgs/map-person-1.png')

      deviceDeviceMap().then((res) => {
        let geometries = []

        res.result.forEach((item) => {
          if (item.lon && item.lat) {
            geometries.push({
              id: 'demo1',
              styleId: 'marker',
              position: new TMap.LatLng(item.lat, item.lon),
              properties: {
                ...item,
              },
            })
          }
        })
        //创建并初始化MultiMarker
        var marker = new TMap.MultiMarker({
          id: 'marker-layer',
          map: this.map,
          styles: {
            marker: new TMap.MarkerStyle({
              width: 45,
              height: 48,
              anchor: { x: 12, y: 35 },
              src: imgSrc,
            }),
          },
          geometries: geometries,
        })
        //初始化infoWindow
        var infoWindow = new TMap.InfoWindow({
          map: this.map,
          position: new TMap.LatLng(39.984104, 116.307503),
          offset: { x: 10, y: -32 }, //设置信息窗相对position偏移像素
        })
        infoWindow.close() //初始关闭信息窗关闭
        //监听标注点击事件
        marker.on('click', function (evt) {
          let props = evt.geometry.properties

          // 获取人员信息详情
          mentalpatientDeviceDetails({
            id: props.mentalPatientId,
          }).then((res) => {
            //设置infoWindow
            infoWindow.open() //打开信息窗
            infoWindow.setPosition(evt.geometry.position) //设置信息窗位置
            getComponentDom(InfoWindow, {
              // on: {
              //   click: {
              //     handleAll: () => {
              //       console.log('hihi')
              //     },
              //   },
              // },
              props: {
                info: res.result,
              },
            }).then((dom) => {
              infoWindow.setContent(dom.outerHTML) //设置信息窗内容
              Promise.resolve().then(() => {
                let infoDom = document.getElementsByClassName('patient-info-box')
                let parentDom = infoDom[0].parentElement
                parentDom.style.background = 'unset'
                parentDom.style['box-shadow'] = 'unset'
                parentDom.parentElement.children[1].style.display = 'none'

                let closeBox = infoDom[0].parentElement.parentElement.parentElement.children[0].children[2]
                closeBox.children[0].remove()
                let imgSrc = require('@/assets/imgs/close-info.png')
                closeBox.style.background = `url(${imgSrc})`
                closeBox.style.backgroundSize = '100% 100%'
                closeBox.style.width = '28px'
                closeBox.style.height = '28px'
                closeBox.style.right = '-5px'
                console.log(closeBox)
              })
            })
          })
        })
      })
    },

    initData() {
      const typeMap = {
        1: 'SOS',
        4: '电子围栏触发',
        8: '运动心率异常',
      }
      earlyWarningPage({
        pageNo: 1,
        pageSize: 100,
      }).then((res) => {
        let data = res.result.records.map((item) => {
          return [
            item.name,
            typeMap[item.type] ? typeMap[item.type] : '',
            item.status == '1' ? '已处理' : '未处理',
            item.eventTime,
          ]
        })
        this.config = {
          ...this.config,
          data,
        }
      })
    },
  },
}
</script>

<style lang="less">
.patient-info-box {
  background: url('../../../assets/imgs/bg-one-map.png') no-repeat;
  background-size: 100% 100%;
}
</style>
<style lang="less" scoped>
.one-map {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  .right-scroll {
    position: absolute;
    top: 10px;
    z-index: 10;
    right: 10px;
    width: 500px;
    .alarm-title {
      height: 36px;
      font-weight: 800;
      font-size: 14px;
      color: #ffffff;
      display: flex;
      align-items: center;
      background: #0d469d;
      border: 0px solid #006fe0;
      width: 100%;
      padding-left: 10px;
    }
  }
  #container {
    height: 100%;
  }
}
</style>
